vue3 + echarts

您所在的位置：网站首页 › echarts 词云形状 › vue3 + echarts

vue3 + echarts

2024-04-01 10:50| 来源: 网络整理| 查看: 265

前言

安装

引用

基本配置

字体颜色随机展示

字体平行且按预设颜色数组展示

自定义展示形状

前言

词云图，是一种文本数据的视觉展示，由词汇组成类似云的彩色图形。

echarts-wordcloud是基于echarts的一个词云库，本篇主要介绍它的使用方法。

安装 npm install echarts npm install echarts-wordcloud

⚠️ 这边需要注意：

echarts-wordcloud@2 is for echarts@5

echarts-wordcloud@1 is for echarts@4

引用 import * as echarts from 'echarts'; import 'echarts-wordcloud'; 基本配置字体颜色随机展示

接下来让我们来看一下echarts-wordcloud的具体配置，我把他封装成了子组件，具体代码如下：

echarts-wordcloud的git地址附上，有需要的可以看看

// ChartWordCloud.vue import * as echarts from 'echarts'; import 'echarts-wordcloud'; import { onMounted } from "vue"; // 引入 lodash 中的 merge、深克隆 import merge from 'lodash/merge'; const props = withDefaults( defineProps(), {}, ) // 词云图默认属性 const defaultSeries = [{ type: 'wordCloud', /** * 绘制词云的形状, 值为回调函数或关键字, 默认 circle * 关键字: * * circle（圆形）词的数量不太多的时候，效果不明显，它会趋向于画一个椭圆 * cardioid（苹果形或心形曲线） * diamond（菱形正方形） * triangle-forward（三角形-向前） * triangle（三角形-直立） * pentagon（五边形） * star（星形） */ shape: 'circle', // 保持 maskImage 的纵横比或形状的纵横比为 1：1 keepAspect: false, /** * 词云轮廓图，支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串, 不包含白色区域; 可选选项 * shape选项将随着云的形状增长而继续应用 * 有形状限制的时候，最好用背景图来实现，而且这个背景图一定要放base64的，不然词云画不出来 */ // maskImage: maskImage, // 词云整个图表放置的位置和尺寸大小 left: 'center', top: 'center', width: '100%', height: '100%', right: null, bottom: null, // 词云文本大小范围, 默认为最小12像素，最大60像素 sizeRange: [12, 60], // 词云文字旋转范围和步长。文本将通过旋转在[-90，90]范围内随机旋转步骤45 // 如果都设置为 0 , 则是水平显示 rotationRange: [-90, 90], rotationStep: 45, /** * 词间距, 距离越大，单词之间的间距越大, 单位像素 * 这里间距太小的话，会出现大词把小词套住的情况，比如一个大的口字，中间会有比较大的空隙，这时候他会把一些很小的字放在口字里面，这样的话，鼠标就无法选中里面的那个小字 */ gridSize: 8, // 设置为true可以使单词部分在画布之外绘制, 允许绘制大于画布大小的单词 drawOutOfBound: false, /** * 布局的时候是否有动画 * 注意：禁用时，当单词较多时，将导致UI阻塞。 */ layoutAnimation: true, // 这是全局的文字样式，相对应的还可以对每个词设置字体样式 textStyle: { fontFamily: 'sans-serif', fontWeight: 'bold', // 颜色可以用一个函数来返回字符串 color: function () { // 随机颜色 return ( 'rgb(' + [ Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160), ].join(',') + ')' ) }, }, // 鼠标hover的特效样式 emphasis: { focus: 'self', textStyle: { textShadowBlur: 10, textShadowColor: '#999' } }, /** * 词云数据，必须是一个数组，每个数组项必须有name和value属性 * 设置单个文本的样式： textStyle * * 例：{ name: '', value: 40, textStyle: { } }, */ data: [] }] let seriesData = props.options.series; const series = merge({}, defaultSeries[0], seriesData[0]) // {}表示合并后的新对象，可以传入一个空对象作为初始值 function DrawWordCloud() { // 词云 let mychart = echarts.init(document.getElementById("charts-content")) // 可以设置主题色'dark' mychart.setOption({ series: series }) } onMounted(() => { DrawWordCloud() })

父组件调用：

import ChartWordCloud from './BestsellersNephogram/ChartWordCloud.vue' import { onMounted, reactive } from 'vue' const state = reactive({ chartOptions: { series: [ { gridSize: 20, data: [ { name: '娜娜米', value: 30, // textStyle: { // color: 'rgba(0, 0, 0, .4)', // }, }, {name: '五条悟',value: 30}, { name: '狗卷', value: 28 }, { name: 'Shoto', value: 28 }, { name: 'Vox', value: 25 }, { name: "Aza", value: 23 }, { name: 'Mysta', value: 20 }, { name: 'Uki', value: 18 }, { name: 'Luca', value: 15 }, { name: 'Shu', value: 10 }, { name: 'Ike', value: 10 }, { name: "Fulgun", value: 10 } ], }, ], }, }) onMounted(() => {}) .bestsellers-container { height: 18.56rem; background: #f0f0f0; #charts-content { /* 需要设置宽高后才会显示 */ width: 100%; height: 100%; } }

效果图：

字体平行且按预设颜色数组展示

如果想实现字体平行且按预设颜色数组展示的效果，只需将rotationRange都设为0即可，再传入自定义的color数组：

// 父组件 chartOptions: { color: ['#FFFFFF', '#FFFFFF', '#FFFFFF', 'rgba(255,255,255,0.7)', 'rgba(255,255,255,0.5)'], series: [ { rotationRange: [0, 0], gridSize: 45, sizeRange: [15, 35], data: [...], }, ], },

子组件则需要相对应的把将color改为：

color: function (v: any) { // 根据dataIndex属性作为下标去访问定义的color色系数组 return `${props.options.color[v.dataIndex]}` },

效果图：